<template>
	<view class="my-journal-container-box">
		<view class="my-journal-top-box">
			<!-- 上传文件的插件组件 -->
			<l-file ref="lFile" @up-success="onSuccess"></l-file>
			<!-- 案例类型 -->
			<view class="my-journal-item" style="justify-content: space-between;" @click="select_show = true">
				<view class="">
					案例类型：
					<text style="color: #97979F;">{{ thisSelect.label }}</text>
					<u-select title="请选择案例类型" :list="case_type_list" v-model="select_show" @confirm="selectValue"></u-select>
				</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
			<!-- 案例标题 -->
			<view class="my-journal-item">
				案例标题：
				<u-input placeholder="请输入" type="text" :custom-style="inputStyle" v-model="addJournalFormData.case_title" :clearable="false" />
			</view>
			<!-- 上传判决书图片区域 -->
			<view class="add-img-box">
				<view class="title">请上传判决书图片</view>
				<view class="upload-box">
					<view class="file-list" v-for="(url, index) in addJournalFormData.image_list" :key="index">
						<u-image width="116" height="116" :src="url"></u-image>
						<view class="icon-box" @click.stop="cancelImgItem(index)"><u-icon name="close" color="#FFF" size="18"></u-icon></view>
					</view>
					<view class="add-file" @click="uploadFile"><u-icon name="plus" color="#CCCCCC" size="56"></u-icon></view>
				</view>
				<!-- <view class="add-img"><u-upload :action="uploadImgAction" width="120" height="120"></u-upload></view> -->
			</view>
			
		</view>
		<!-- 底部的确认按钮 -->
		<view class="add-journal-box" @click="addJorunalClick">确认</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 添加案例的数据表单对象
			addJournalFormData: {
				case_title: '',
				case_type: '',
				image_list: []
			},
			// 案件可选类型
			case_type_list: [],
			// select 选择器打开时的默认选中项指向的值是该项在 list 数组中的下标
			// defaultValue: [0],
			// 控制 select 选择器的显示与隐藏，默认隐藏
			select_show: false,
			// select 选中的数据对象
			thisSelect: {
				value: 0,
				label: '暂未选择'
			},
			// 输入框的样式
			inputStyle: {
				width: '552rpx',
				color: '#97979F'
			}
		};
	},
	onLoad() {
		this.getCaseType()
	},
	methods: {
		async getCaseType() {
			const res = await this.$u.api.getcaseTypeList()
			if(!res) return
			for(let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				}
				this.case_type_list.push(item)
			}
			// console.log(this.case_type_list);
		},
		// 确定按钮点击事件
		async addJorunalClick() {
			// console.log(this.addJournalFormData.case_title);
			// 校验案例类型和标题是否已选已填，二者缺一不可
			if(this.thisSelect.value === 0 || this.addJournalFormData.case_title === '') {
				return this.$u.toast('请先完善案例信息！')
			}
			// TODO:通过表单校验后的逻辑，即为该用户添加该案例
			let params = {
				title: this.addJournalFormData.case_title,
				type_id: this.thisSelect.value,
				content_url: this.addJournalFormData.image_list
			}
			const res = await this.$u.api.addJournal(params)
			if(!res) return
			// 添加案例成功回调后跳转到添加案例成功页面(注:需要将添加的案例类型传递过去)
			this.$u.route('/myPackageA/pages/views/add-journal-success')
		},
		// 上传图片
		async uploadFile() {
			if(this.addJournalFormData.image_list.length >= 9) return this.$u.toast('最多添加9张图片哦')
			uni.showLoading({
				mask: true,
				title: '上传中...'
			});
			// 1.选择图片（可以多选最多九张）
			const res = await uni.chooseImage({
				count: (9 - this.addJournalFormData.image_list.length),		// 最多可以选择的图片张数
				sizeType: ['original'],		// original 原图，compressed 压缩图
				sourceType: ['album'],		// album 从相册选图，camera 使用相机
			});
			// console.log('res:', res);
			if (res.length < 2) {
				// 小于2则没有选择图片
				uni.hideLoading();
				return;
			}
			// console.log('选择了多张图片', res);
			var that1 = this;
			 res[1].tempFilePaths.forEach(async item => {
				 // 2.将选择的图片上传到目标服务器
				 const arr = await uni.uploadFile({
				 	// 需要上传的地址
				 	url: that1.vuex_uploadAction,	// 保存在 vuex 中的全局上传文件的服务器路径
				 	// filePath  需要上传的文件
				 	filePath: item,
				 	name: 'file',
				 	header: {
				 		token: that1.vuex_token // 挂载请求头为用户的 token
				 	}
				 });
				 // console.log(arr);
				 let data = JSON.parse(arr[1].data);
				 // console.log('data:', data);
				 if (data.code !== 1) {
					uni.hideLoading();
					that1.$u.toast(data.msg);
					return;
				}
				 that1.addJournalFormData.image_list.push(data.data.fullurl);
			 })
			 console.log('图片列表', this.addJournalFormData.image_list);
			uni.hideLoading();
		},
		// 删除图片按钮的点击事件
		cancelImgItem(index) {
			this.addJournalFormData.image_list.splice(index, 1)
		},
		// select 选择器的确定按钮点击事件
		selectValue(thisSelectArr) {
			this.thisSelect = thisSelectArr[0];
		},
		
	}
};
</script>

<style lang="scss" scoped>
.my-journal-container-box {
	width: 750rpx;
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.my-journal-top-box {
	margin-top: 20rpx;
}
.add-journal-box {
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background-color: $u-text-color;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}

.my-journal-item {
	height: 92rpx;
	padding: 0 24rpx;
	// box-shadow: 0px 1px 0px 0px #E8E8E8;
	border-bottom: 1rpx solid #e8e8e8;
	background-color: white;
	display: flex;

	align-items: center;
	color: #141418;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
}
.add-img-box {
		// min-height: 280rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		.title {
			height: 113rpx;
			line-height: 113rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
		}
		.upload-box {
			width: 100%;
			height: auto;
			background: #FFF;
			border: 0;
			justify-content: flex-start;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 20rpx;
			.file-list {
				margin-bottom: 20rpx;
				margin-right: 25rpx;
				position: relative;
				.icon-box {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #ef0000;
					position: absolute;
					top: -13rpx;
					right: -13rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.add-file {
				width: 116rpx;
				height: 116rpx;
				border: 1rpx solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}
		}
	}
.upload-case-book-box {
	width: 100%;
	min-height: 260rpx;
	margin-top: 20rpx;
	padding: 35rpx 32rpx;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.title {
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
	}
	.upload-list-box {
		margin-bottom: 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
}
.upload-box {
	width: 78rpx;
	height: 78rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F7F7F7;
	border: 1rpx dashed #999999;
	margin-right: 15rpx;
}
</style>
